<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type='text/javascript' src='../js/vue.js'></script>
</head>

<body>
    <div id='root'>
        <school></school>
        <br>
        <student></student>
        <br>
        {{msg}}
        <hello></hello>
    </div>
    <div id='root2'>
        <hello></hello>
    </div>
    <script type='text/javascript'>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const school = Vue.extend({//组件没有el由VUE管理
            template: `
                <div>
                   学校名称：<h2>{{school.name}}</h2>
                   学校地址：<h2>{{school.address}}</h2>
                   <button @click='showName'>name</button>
                </div>`,
            data() {
                return {
                    school: {
                        name: "123",
                        address: "456"
                    }
                }
            },
            methods: {
                showName(){
                    alert(this.school.name)
                }
            },
        })
        const student = Vue.extend({//组件没有el由VUE管理
            template: `
                <div>
                   学生名称：<h2>{{student.name}}</h2>
                   学生年龄：<h2>{{student.age}}</h2>
                </div>`,
            data() {
                return {
                    student: {
                        name: "789",
                        age: "10"
                    }
                }
            }
        })
        const hello = Vue.extend({//组件没有el由VUE管理
            template: `
                <div>
                  你好呀{{hello}}!
                </div>`,
            data() {
                return {
                    student: {
                        hello: "htllo",
                    }
                }
            }
        })
        //全局注册一般不用
        Vue.component('hello',hello)
        //创建Vue实例
        new Vue({
            el: '#root',
            components: {
                school,
                student
            },
            data:{
                msg:"852"
            }
        })
        new Vue({
            el: '#root2',
            components: {
                school,
                student
            },
            data:{
                msg:"852"
            }
        })
    </script>
</body>

</html>